{% extends "PopshouseAdminBundle::layout.html.twig" %}
{% block title %}
Achtergrond toevoegen
{% endblock %}

{% block js %}
swfu = new SWFUpload({
                // Backend Settings
                upload_url: "http://localhost:8888{{ asset('upload.php') }}",
                //post_params: {"PHPSESSID": "5a8fkrb4s2l38ldvidc5bt7sc6"},
			     file_post_name : "Filedata",
			    use_query_string : false,
			    
                // File Upload Settings
                file_size_limit : "2 MB",   // 2MB
                file_types : "*.jpg",
                file_types_description : "JPG afbeelding",
                file_upload_limit : 1,

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess,
                upload_complete_handler : uploadComplete,
                
                prevent_swf_caching: false,
                
                // Button Settings

                button_placeholder_id : "spanButtonPlaceholder",
                button_width: 1,
                button_height: 1,
                button_action : SWFUpload.BUTTON_ACTION.SELECT_FILE,
           
                button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
                button_cursor: SWFUpload.CURSOR.HAND,
                
                // Flash Settings
                flash_url : "{{ asset('js/swfupload/swfupload.swf') }}",

                custom_settings : {
                    upload_target : "divFileProgressContainer"
                },
                
                // Debug Settings
                debug: true
            });
{% endblock %}

{% block css %}

.progressWrapper {
    width: 357px;
    overflow: hidden;
}

.progressContainer {
    margin: 5px;
    padding: 4px;
    border: solid 1px #E8E8E8;
    background-color: #F7F7F7;
    overflow: hidden;
}
/* Message */
/*.message {
    margin: 1em 0;
    padding: 10px 20px;
    border: solid 1px #FFDD99;
    background-color: #FFFFCC;
    overflow: hidden;
}*/
/* Error */
.red {
    border: solid 1px #B50000;
    background-color: #FFEBEB;
}

/* Current */
.green {
    border: solid 1px #DDF0DD;
    background-color: #EBFFEB;
}

/* Complete */
.blue {
    border: solid 1px #CEE2F2;
    background-color: #F0F5FF;
}

.progressName {
    font-size: 8pt;
    font-weight: 700;
    color: #555;
    width: 323px;
    height: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
    font-size: 0;
    width: 0%;
    height: 2px;
    background-color: blue;
    margin-top: 2px;
}

.progressBarComplete {
    width: 100%;
    background-color: green;
    visibility: hidden;
}

.progressBarError {
    width: 100%;
    background-color: red;
    visibility: hidden;
}

.progressBarStatus {
    margin-top: 2px;
    width: 337px;
    font-size: 7pt;
    font-family: Arial;
    text-align: left;
    white-space: nowrap;
}

a.progressCancel {
    font-size: 0;
    display: block;
    height: 14px;
    width: 14px;
    background-image: url('{{ asset('images/layout/admin/icon/cancelbutton.gif') }}');
    background-repeat: no-repeat;
    background-position: -14px 0px;
    float: right;
}

a.progressCancel:hover {
    background-position: 0px 0px;
}

#thumbnails img{
    width:100px;
    height:100px;
    border:3px solid #ff6600; 
}

/* -- SWFUpload Object Styles ------------------------------- */
.swfupload {
    vertical-align: top;
    position:absolute;
    z-index:1;
    width:126px;
    height:25px;
}
{% endblock %}
{% block content %}

        <div class="left side">
    {% include "PopshouseAdminBundle:Background:menu.html.twig"  %}
</div>
<div class="left content" style="width:670px">
<h2>Achtergrond toevoegen</h2>
<form action="#" method="post" enctype="multipart/form-data">
            {% form_theme form 'PopshouseSiteBundle::form.html.twig' %}
            {{ form_errors(form) }}
            
                
		    <div class="message message-green success" style="display:none;">
		    <span class="message-text"></span>
		    <span class="close"><img src="{{ asset('images/layout/admin/icon/close_green.png') }}" alt="sluit" /></span>
		    </div>
		    <div class="message message-red error" style="display:none;">
		    <span class="message-text"></span>
		    <span class="close"><img src="{{ asset('images/layout/admin/icon/close_red.png') }}" alt="sluit" /></span>
		    </div>
    
            <span id="spanButtonPlaceholder"></span>
            <a class="action uploadCtrl"><span>Selecteer afbeelding</span></a>
           
            <div id="divFileProgressContainer" style="height:75px;display:none;"></div>
            <div id="thumbnails">
           
            </div>
            <dl>
		            
                <noscript>
                <dt><label for="image_afbeelding">Afbeelding</label></dt> 
                <dd><input type="file" id="image_afbeelding_file" name="image[afbeelding][file]" required="required" /><input type="hidden" id="image_afbeelding_token" name="image[afbeelding][token]" value="998101" /><input type="hidden" id="image_afbeelding_original_name" name="image[afbeelding][original_name]" value="" /></dd> 
                </noscript>
                
                
                
                {% include "PopshouseAdminBundle:Background:form.html.twig" %}
                
            </dl>
        
        
            {{ form_rest(form) }}
            <input type="submit" value="Toevoegen" />
        </form>
    </div>
{% endblock %}